<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<html:header title="角色权限管理">

    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style type="text/css">
        .layui-form-checkbox[lay-skin=primary] span {
            padding-left: 16px;
            padding-right: 15px;
            font-size: 14px;
            line-height: 14px;
        }
    </style>
    <script>
        jQuery(function () {
            get("${baseUrl}user/role/getById.action?id=${roleId}", function (resp) {
                if (resp.code == 1){
                    $("#roleName").html(resp.data.name);
                }
            });
        });
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
            renderTable();
            form.on('submit(cancel)', function (data) {
                // closeTab(window.location.href);
                closeSubIframe();
            });
            form.on('submit(save)', function (data) {
                var list = [];
                $(".layui-form-checked").each(function(i,element){
                    var $checkbox = $(element).prev();
                    //获取到权限[id,name,title]
                    console.log("id="+$checkbox.attr("pid") + ",name=" + $checkbox.attr("name") + ",title=" + $checkbox.attr("title"));
                    list.push({permissionId:$checkbox.attr("pid"),roleId:"${roleId}"});
                });

                var index = layer.load();
                post("${baseUrl}user/role/updateRolePermission.action?roleId=${roleId}" ,list,function (resp) {
                   if (resp.code == 1){
                       layer.close(index);
                       tip("角色权限保存成功");
                       setTimeout(function () {
                           // closeTab(window.location.href);
                           closeSubIframe();
                       },500);
                   }  else {
                       tip(resp.msg);
                   }
                });

            });
        });

        function renderTable() {
            layui.table.render({
                id:'rolePermission',
                elem: '#rolePermission',
                url: "${baseUrl}user/role/getPermissions.action?roleId=${roleId}",
                cols: [[
                    {field: 'level1', width: 100, title: '一级',style:"font-size:12px;"},
                    {field: 'level2', width: 140, title: '二级',style:"font-size:12px;"},
                    {title: '权限配置规则', templet: '#selectPermission'}
                ]],
                done: function(res, curr, count){
                    alarmTableRowSpan('level1',1);
                }
            });
        }


    </script>

</html:header>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <input type="hidden" id="roleId" value="${roleId}">

        <div class="table-tool-div">
            <form class="layui-form" action="">
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        角色名称:<span id="roleName"></span>
                    </div>
                    <div class="layui-col-xs6" style="text-align: center">
                        <a class="layui-btn layui-btn-sm"  lay-submit="" lay-filter="save">保存</a>
                        <a class="layui-btn layui-btn-primary layui-btn-sm"  lay-submit="" lay-filter="cancel">取消</a>
                    </div>
                </div>
            </form>
        </div>

        <div class="horizon-line"></div>

        <table class="layui-hide" id="rolePermission" lay-filter="rolePermission"></table>

        <script type="text/html" id="level2">
            <input type="checkbox" title="{{ d.level2 }}" lay-skin="primary"/>
        </script>

        <script type="text/html" id="selectPermission">
            {{#  layui.each(d.queryPermissionList, function(index, item){ }}
                <input type="checkbox" pid="{{ item.id }}" {{ item.checked }} name="permission[{{ item.code }}]" title="{{ item.name }}" lay-skin="primary"/>
            {{#  }); }}
        </script>
    </div>
</div>

</body>
</html>